import { h } from "vue";
import {
  DatePickerProps,
  InputProps,
  NA,
  NSwitch,
  SelectProps,
  SwitchProps,
} from "naive-ui";
import { TableColumns } from "@/type";
import { RuleTypeConst } from "@/const";

export const Columns = (): // associationState: associationRuleState
TableColumns => {
  return [
    {
      type: "selection",
      fixed: "left",
      hideInForm: true,
      hideInSearch: true,
    },
    {
      title: "序号",
      key: "key",
      width: "80",
      fixed: "left",
      hideInForm: true,
      hideInSearch: true,
    },
    {
      title: "ID",
      key: "id",
      fixed: "left",
      hideInTable: true,
      hideInForm: true,
      hideInSearch: true,
    },
    {
      title: "采集工具",
      key: "acquisition_tools",
      ellipsis: {
        tooltip: true,
      },
      width: "100",
      category: "select",
      formItemProps: {
        placeholder: "请选择",
        options: [
          {
            label: "Drive My Car",
            value: "song1",
          },
          {
            label: "Norwegian Wood",
            value: "song2",
          },

          {
            label: "Nowhere Man",
            value: "song4",
          },
          {
            label: "Think For Yourself",
            value: "song5",
          },
          {
            label: "The Word",
            value: "song6",
          },
        ],
      } as SelectProps,
    },
    {
      title: "作业包名称",
      key: "job_package_name",
      ellipsis: {
        tooltip: true,
      },
      width: "100",
      category: "input",
      formItemProps: {
        placeholder: "请输入",
      } as InputProps,
    },
    {
      title: "作业包地址",
      key: "job_package_address",
      hideInSearch: true,
      ellipsis: {
        tooltip: true,
      },
      width: "100",
      category: "select",
      formItemProps: {
        placeholder: "请选择",
        options: RuleTypeConst,
      },
    },
    {
      title: "类型",
      key: "type",
      ellipsis: {
        tooltip: true,
      },
      width: "80",
      category: "select",
      formItemProps: {
        placeholder: "请选择",
        options: RuleTypeConst,
      } as SelectProps,
    },
    {
      title: "数据源",
      key: "data_source",
      ellipsis: {
        tooltip: true,
      },
      hideInSearch: true,
      width: "80",
      category: "select",
      formItemProps: {
        placeholder: "请选择",
        options: RuleTypeConst,
      } as SelectProps,
    },
    {
      title: "目标表",
      key: "object_table",
      hideInSearch: true,
      ellipsis: {
        tooltip: true,
      },
      category: "select",
      formItemProps: {
        placeholder: "请选择",
        options: [],
      } as SelectProps,
    },
    {
      title: "描述",
      key: "desc",
      hideInSearch: true,
      ellipsis: {
        tooltip: true,
      },
      width: "100",
      category: "input",
      formItemProps: {
        placeholder: "请输入",
        type: "textarea",
        autosize: { minRows: 3 },
      } as InputProps,
    },
    {
      title: "关联配置",
      key: "configuration_associated",
      hideInSearch: true,
      //  fixed: 'left',
      ellipsis: {
        tooltip: true,
      },
      category: "select",
      formItemProps: {
        placeholder: "请选择",
        options: [],
      } as SelectProps,
    },
    {
      title: "创建人",
      key: "created_person",
      hideInSearch: true,
      hideInForm: true,
      ellipsis: {
        tooltip: true,
      },
      width: "100",
      category: "input",
      formItemProps: {
        placeholder: "请输入",
      } as InputProps,
    },
    {
      title: "创建时间",
      key: "created_date",
      hideInForm: true,
      hideInSearch: true,
      ellipsis: {
        tooltip: true,
      },
      width: "150",
      category: "datetime",
      formItemProps: {
        type: "datetime",
        placeholder: "选择日期",
        style: {
          width: "100%",
        },
      } as DatePickerProps,
    },
    {
      key: "state",
      title: "状态",
      width: "80",
      hideInSearch: true,
      hideInForm: true,
      category: "select",
      fixed: "right",
      formItemProps: {
        placeholder: "请选择",
        options: [
          {
            value: true,
            label: "启用",
          },
          {
            value: false,
            label: "禁用",
          },
        ],
      },
      render(row) {
        return h(
          NSwitch,
          {
            value: row.state,
            onClick: () => {
              // TODO 提交表单，成功之后刷新表格
              row.state = !row.state;
            },
          },
          { checked: () => "启用", unchecked: () => "禁用" }
        );
      },
    },
  ];
};
